<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Progress演示，志玲姐姐 - swiper中文网</title>
    <meta name="viewport" content="initial-scale=1">
    <!--<link rel="stylesheet" href="../../dist/css/swiper.min.css">
    <script src="../../dist/js/swiper.min.js"></script>-->
    <link rel="stylesheet" href="../css/swiper.min.css">
    <script src="../js/swiper.min.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        html, body, #banner, #banner .swiper-slide {
            height: 100%;
        }
        body {
            background: #000;
            overflow: hidden;
        }
        #banner .swiper-slide {
            overflow: hidden;
        }
        #banner .swiper-slide img {
            width: 100%;
        }
        .thumb-list {
            position: absolute;
            width: 100%;
            left: 0;
            bottom: 5%;
        }
        .thumb {
            width: 20%;
            margin-left: 4%;
            float: left;
        }
        .thumb .swiper-slide img {
            width: 100%;
            display: block;
        }
    </style>
</head>
<body>
<div style="max-width:640px; margin:0 auto; height:100%; position:relative;">
    <div class="swiper-container " id="banner">
        <div class="swiper-wrapper">
            <div class="swiper-slide"><img src="../images/zhiling1.jpg"  ></div>
            <div class="swiper-slide"><img src="../images/zhiling2.jpg"  ></div>
            <div class="swiper-slide"><img src="../images/zhiling3.jpg"  ></div>
            <div class="swiper-slide"><img src="../images/zhiling4.jpg"  ></div>
        </div>
    </div>
    <div class="thumb-list">
        <div class="swiper-container thumb" id="thumb1">
            <div class="swiper-wrapper">
                <div class="swiper-slide"><img src="../images/thumb1.jpg"  ></div>
                <div class="swiper-slide"><img src="../images/thumb1_h.jpg"  ></div>
            </div>
        </div>
        <div class="swiper-container thumb" id="thumb2">
            <div class="swiper-wrapper">
                <div class="swiper-slide"><img src="../images/thumb2.jpg"  ></div>
                <div class="swiper-slide"><img src="../images/thumb2_h.jpg"  ></div>
            </div>
        </div>
        <div class="swiper-container thumb" id="thumb3">
            <div class="swiper-wrapper">
                <div class="swiper-slide"><img src="../images/thumb3.jpg"  ></div>
                <div class="swiper-slide"><img src="../images/thumb3_h.jpg"  ></div>
            </div>
        </div>
        <div class="swiper-container thumb" id="thumb4">
            <div class="swiper-wrapper">
                <div class="swiper-slide"><img src="../images/thumb4.jpg"  ></div>
                <div class="swiper-slide"><img src="../images/thumb4_h.jpg"  ></div>
            </div>
        </div>
    </div>
</div>
<script type = "text/javascript">
    var bannerSwiper = new Swiper('#banner', {
        mousewheel: true,
        effect: 'coverflow',
        speed: 300,
        watchSlidesProgress: true,
        on: {
            touchMove: function() {
                progress = this.progress
                for (i = 0; i < this.slides.length; i++) {
                    slideProgress = this.slides[i].progress
                    if (Math.abs(slideProgress) < 1) {
//                        thumbSwiper[i].setTranslate(thumbSwiper[i].width * (Math.abs(slideProgress) - 1))
                    }
                }
            },
            transitionStart: function() {
                activeIndex = this.activeIndex;
                for (i = 0; i < thumbSwiper.length; i++) {
                    if (i == activeIndex) {
                        thumbSwiper[i].slideTo(1);
                    } else {
                        thumbSwiper[i].slideTo(0);
                    }
                }
            },
        }
    });
    var thumbSwiper = new Swiper('.thumb', {
        watchSlidesProgress: true,
        effect: 'cube',
        touchRatio: 0,
        cubeEffect: {
            shadow: false,
        },
        on: {
            tap: function() {
                bannerSwiper.slideTo(this.$el.index());
            },
        },
    });

</script>
</body>
</html>